<template>
	<div id="app">
        <!-- desktop start-->
        <div class="desktop" v-if="platform === 'desktop'">
            <div class="title" v-if="platform === 'desktop'">
                <h1>支付方式</h1>
            </div>
            <el-card class="box-card">
                <div class="order-tip">
                    <span class="icon-success"></span>
                    <span>订单提交成功！</span>
                    <p style="vertical-align:middle;margin:10px 0;">请您在提交订单后<span style="font-size:14px;color:red;vertical-align:middle;">60 分钟</span>内完成支付，否则订单会自动取消！</p>
                    <mu-divider shallowInset/>
                    <h3>(test)井村屋 IMURAYA 能量棒</h3>
                </div>
            </el-card>
            <el-card class="box-card">
                <div style="margin-bottom: 10px;">
                    <span>支付金额：</span>
                    <span style="color: red;font-size:18px;">￥598.00</span>
                    <span style="float: right;">友情提示：汇率自动按1:6计算，进位取整</span>
                </div>
                <mu-divider shallowInset/>
                <div class="platform">
                    <el-tabs v-model="activeTab" type="card">
                        <el-tab-pane label="支付平台" name="first">
                            <div class="left-content">
                                <el-radio class="radio" v-model="radio" label="1">
                                    <span class="icon-platform">
                                        <img v-show="radio === '1'" class="checked-box" src="./assets/img/checked-box.png">
                                        <img src="./assets/img/icon-platform-wechat.png">
                                    </span>
                                </el-radio>
                                <el-radio class="radio" v-model="radio" label="2">
                                    <span class="icon-platform">
                                        <img v-show="radio === '2'" class="checked-box" src="./assets/img/checked-box.png">
                                        <img src="./assets/img/icon-platform-alipay.png">
                                    </span>
                                </el-radio>
                                <el-radio class="radio" v-model="radio" label="3">
                                    <span class="icon-platform">
                                        <img v-show="radio === '3'" class="checked-box" src="./assets/img/checked-box.png">
                                        <img src="./assets/img/icon-platform-paypal.png">
                                    </span>
                                </el-radio>
                            </div>
                            <div class="right-content" v-show="radio === '1'">
                                <img src="./assets/img/u65.png">
                                <span>请使用微信扫描二维码完成支付</span>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="网银支付" name="second" class='bank-list'>
                            <ul>
                                <li v-for="(item, index) in bankArr" :class="{ active : choosedBankIdx === index }" @click="chooseBank(index)">
                                    <img :src="item.image">
                                </li>
                            </ul>
                        </el-tab-pane>
                  </el-tabs>
                </div>
                <el-button class="submit-btn" type="primary">立即支付</el-button>
            </el-card>
        </div>

        <!-- mobile start-->
        <div class="mobile" v-if="platform === 'mobile'">
            <el-card class="box-card">
                <div class="order-tip">
                    <span class="icon-success"></span>
                    <span>订单提交成功！</span>
                    <p style="vertical-align:middle;margin:10px 0;">请您在提交订单后<span style="font-size:14px;color:red;vertical-align:middle;">60 分钟</span>内完成支付，</p>
                    <p>否则订单会自动取消！</p>
                    <h3>(test)井村屋 IMURAYA 能量棒</h3>
                    <div style="margin-bottom: 10px;">
                        <span>支付金额：</span>
                        <span style="color: red;font-size:18px;">￥598.00</span>
                    </div>
                </div>
            </el-card>
            <div class="platform">
                <p class="wechat-title">选择支付方式</p>
                <el-tabs v-model="activeTab" type="border-card" :class="{ wechatTab : isWechat }">
                    <el-tab-pane label="支付平台" name="first">
                        <mu-list>
                            <mu-list-item v-show="isWechat" title="">
                                <img src="./assets/img/icon-platform-wechat.png">
                                <mu-icon slot="right" value="keyboard_arrow_right"/>
                            </mu-list-item>
                            <span v-show="isWechat" class="other" @click="showOtherPlatform">其他支付方式</span>
                            <mu-list-item v-show="!isWechat || otherPlatform" title="" @click="showWechatTip">
                                <img src="./assets/img/icon-platform-alipay.png">
                                <mu-icon slot="right" value="keyboard_arrow_right"/>
                            </mu-list-item>
                            <mu-list-item v-show="!isWechat || otherPlatform" title="" @click="showWechatTip">
                                <img src="./assets/img/icon-platform-paypal.png">
                                <mu-icon slot="right" value="keyboard_arrow_right"/>
                            </mu-list-item>
                          </mu-list>
                    </el-tab-pane>
                    <el-tab-pane label="网银支付" name="second" class='bank-list' v-show="isWechat && otherPlatform">
                        <ul class="clearfix" @click="showWechatTip">
                            <li v-for="(item, index) in bankArr" :class="{ active : choosedBankIdx === index }" @click="chooseBank(index)">
                                <img :src="item.image">
                            </li>
                        </ul>
                        <el-button class="submit-btn" type="primary" v-show="!isWechat">立即支付</el-button>
                    </el-tab-pane>
              </el-tabs>
            </div>
            <div class="wechat-tip clearfix" v-show="wechatTip" @click="showWechatTip">
                <img src="./assets/img/wechat-tip-arrow.png">
                <p>请在菜单中选择在浏览器打开以完成支付</p>
            </div>
        </div>
	</div>
</template>

<script>
import Vue from 'vue'

export default {
	name: 'app',
	components: {
	},
	data() {
		return {
            platform: 'desktop',
            isWechat: false,
            otherPlatform: false,
            wechatTip: false,
            bankArr: [
                {'image':'https://img.99bill.com/jt/g/i/bankpng/bank_icbc.png?version=1','value':'ICBCB2C','name':'中国工商银行'},
                {'image':'https://img.99bill.com/jt/g/i/bankpng/bank_ccb.png?version=1','value':'CCB','name':'中国建设银行'},
                {'image':'https://img.99bill.com/jt/g/i/bankpng/bank_bcom.png?version=1','value':'COMM-DEBIT','name':'交通银行'},
                {'image':'https://img.99bill.com/jt/g/i/bankpng/bank_abc.png?version=1','value':'ABC','name':'中国农业银行'},
                {'image':'https://img.99bill.com/jt/g/i/bankpng/bank_cmb.png?version=1','value':'CMB','name':'招商银行'},
                {'image':'https://img.99bill.com/jt/g/i/bankpng/bank_boc.png?version=1','value':'BOCB2C','name':'中国银行'},
                {'image':'https://img.99bill.com/jt/g/i/bankpng/bank_spdb.png?version=1','value':'SPDB','name':'上海浦东发展银行'},
                {'image':'https://img.99bill.com/jt/g/i/bankpng/bank_gdb.png?version=1','value':'GDB','name':'广发银行'},
                {'image':'http://ria.ihuipao.cn/bisaitong/img/logo1.jpg','value':'FDB','name':'富滇银行'},
                {'image':'http://ria.ihuipao.cn/bisaitong/img/logo4.jpg','value':'WZCBB2C-DEBIT','name':'温州银行'},
                {'image':'https://img.99bill.com/jt/g/i/bankpng/bank_cmbc.png?version=1','value':'CMBC','name':'中国民生银行'},
                {'image':'https://img.99bill.com/jt/g/i/bankpng/bank_cib.png?version=1','value':'CIB','name':'兴业银行'},
                {'image':'https://img.99bill.com/jt/g/i/bankpng/bank_citic.png?version=1','value':'CITIC','name':'中信银行'},
                {'image':'https://img.99bill.com/jt/g/i/bankpng/bank_pab.png?version=1','value':'SPA-DEBIT','name':'平安银行'},
                {'image':'https://img.99bill.com/jt/g/i/bankpng/bank_shb.png?version=1','value':'SHBANK','name':'上海银行'},
                {'image':'https://img.99bill.com/jt/g/i/bankpng/bank_sdb.png?version=1','value':'SPABANK','name':'深圳发展银行'},
                {'image':'https://img.99bill.com/jt/g/i/bankpng/bank_post.png?version=1','value':'POSTGC','name':'中国邮政储蓄银行'},
                {'image':'https://img.99bill.com/jt/g/i/bankpng/bank_bjrcb.png?version=1','value':'BJRCB','name':'北京农村商业银行'},

                {'image':'https://img.99bill.com/jt/g/i/bankpng/bank_bob.png?version=1','value':'BJBANK','name':'北京银行'},
                {'image':'https://img.99bill.com/jt/g/i/bankpng/bank_hzb.png?version=1','value':'HZCBB2C','name':'杭州银行'},
                {'image':'https://img.99bill.com/jt/g/i/bankpng/bank_srcb.png?version=1','value':'SHRCB','name':'上海农商银行'},
                {'image':'https://img.99bill.com/jt/g/i/bankpng/bank_nbcb.png?version=1','value':'NBBANK','name':'宁波银行'},
            ],
            activeTab: 'first',
            radio: '1',
            choosedBankIdx: -1
		}
	},
    created() {
        //判断桌面端还是移动端
        var clientWid = document.body.clientWidth;
        if(clientWid <= 768) {
            this.platform = 'mobile';
        } else {
            this.platform = 'desktop';
        }
        //判断微信浏览器
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
            this.isWechat =  true;
        } else {
            this.isWechat = false;
        }
    },
	methods: {
        chooseBank(index) {
            this.choosedBankIdx = index;
        },
        showOtherPlatform() {
            this.otherPlatform = !this.otherPlatform;
        },
        showWechatTip() {
            if(this.isWechat) {
                this.wechatTip = !this.wechatTip;
            }
        }
    },
    watch: {
    },
}
</script>

<style lang="scss" rel="stylesheet/scss">
@mixin transition {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

@mixin transition-slow {
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    transition: all 0.6s ease;
}

html {
    font-size: 4.375vw;
}

ul {
    list-style: none;
}

.clearfix:after {
    content: '';
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
}

#app {
    //desktop start 
    .desktop {
        background-color: #eee;
        padding-bottom: 40px;
        .icon-success {
            display: inline-block;
            vertical-align: middle;
            width: 30px;
            height: 30px;
            margin-right: 10px;
            background-image: url('assets/img/icon-success.png');
            background-repeat: no-repeat;
            background-size: contain;
        }
        .box-card {
            width: 1050px;
            margin: 20px auto;
        }
        .title {
            width: 100%;
            height: 80px;
            display: inline-block;
            line-height: 80px;
            background-color: #fff;
            h1 {
                width: 1050px;
                margin: 0 auto;
                color: red;
            }
        }
        .order-tip {
            span {
                font-size: 18px;
                vertical-align: middle;
            }
        }
        .platform {
            margin: 20px 0;
            .left-content {
                width: 300px;
                float: left;
            }
            .right-content {
                height: 200px;
                margin-top: 30px;
                float: left;
                border-left: 1px solid #d9d9d9;
                img {
                    border: 1px solid #d9d9d9;
                    padding: 6px;
                    margin: 30px 40px 50px 80px;
                    vertical-align: middle;
                }
            }
        }
        .radio {
            display: block;
            margin-top: 40px;
            margin-bottom: 40px;
            margin-left: 40px !important;
        }
        .icon-platform {
            position: relative;
            img {
                width: 100px;
                height: 36px;
                margin-left: 30px;
                vertical-align: middle;
            }
            .checked-box {
                position: absolute;
                width: 130px;
                height: 50px;
                top: -15px;
                left: -6px;
            }
        }
        .bank-list {
            ul {
                li {
                    width: 200px;
                    float: left;
                    padding: 8px 20px;
                    border: 3px solid #d9d9d9;
                    margin: 14px;
                    cursor: pointer;
                    &.active {
                        border-color: #8bc34a;
                    }
                }
            }
        }
        .submit-btn {
            width: 200px;
            margin: 10px 56px;
        }
    }
    //mobile start 
    .mobile {
        background-color: #eee;
        .icon-success {
            display: inline-block;
            vertical-align: middle;
            width: 2.2rem;
            height: 2.2rem;
            margin-right: 1rem;
            background-image: url('assets/img/icon-success.png');
            background-repeat: no-repeat;
            background-size: contain;
        }
        .box-card {
            width: 100%;
            margin-bottom: 10px;
        }
        .title {
            width: 100%;
            height: 80px;
            display: inline-block;
            line-height: 80px;
            background-color: #fff;
        }
        .order-tip {
            text-align: center;
            width: 24rem;
            margin: 1.6rem auto 0;
            p {
                line-height: 1rem;
                margin: 0;
                font-size: 1.6rem;
            }
            span {
                font-size: 2rem;
                vertical-align: middle;
            }
        }
        .platform {
            background-color: #eee;
            .wechatTab {
                .el-tabs__header {
                    display: none;
                }
            }
            .wechat-title {
                font-size: 1.6rem;
                padding-left: 1.4rem;
            }
            .el-tabs--border-card {
                background-color: #eee;
            }
            .el-tabs__header {
                margin-bottom: 4px !important;
                .el-tabs__nav {
                    width: 100%;
                    .el-tabs__item {
                        width: 50%;
                        padding: 0;
                        text-align: center;
                        background-color: #fff;
                        &.is-active {
                            color: #fff;
                            background-color: #a2a2a2;
                        }
                    }
                }
            }
            .el-tabs__content {
                padding: 0;
                min-height: 380px;
                .mu-list {
                    padding: 0;
                    .mu-item-wrapper {
                        background-color: #fff;
                        margin-bottom: 1px;
                        .mu-item {
                            padding: 0.8rem 1.4rem;
                            .mu-item-content {
                                height: 3rem;
                                img {
                                    width: 8rem;
                                    height: 100%;
                                }
                            }
                        }
                    }
                }
                .other {
                    text-decoration: underline;
                    padding-left: 1.6rem;
                    line-height: 4rem;
                }
            }
        }
        .bank-list {
            padding-bottom: 10rem;
            ul {
                padding: 0;
                li {
                    width: 44%;
                    float: left;
                    padding: 8px 20px;
                    border: 3px solid #d9d9d9;
                    background-color: #fff;
                    margin-left: 1.3rem;
                    margin-right: 0;
                    margin-bottom: 0.8rem;
                    cursor: pointer;
                    img {
                        width: 100%;
                    }
                    &:nth-child(2n) {
                        margin-right: 1rem;
                    }
                    &.active {
                        border-color: #8bc34a;
                    }
                }
            }
        }
        .submit-btn {
            position: absolute;
            left: 50%;
            bottom: 5rem;
            width: 90%;
            height: 4rem;
            transform: translate(-50%,0);
        }
        .wechat-tip {
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            color: #fff;
            img {
                float: right;
                margin-top: 10px;
                margin-right: 3rem;
                width: 6rem;
                display: block;
                transform: rotate(45deg);
            }
            p {
                font-size: 1.6rem;
                text-align: center;
                margin-top: 9rem;
            }
        }
    }
}


</style>
